<template>
  <el-row :gutter="20">
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>我的绩效</div>
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM"
          @change="changeDate"
          style="width: 220px; position: absolute; left: 150px; top: 13px"
        />
      </div>
      <el-col :span="24">
        <el-table
          :span-method="objectSpanMethod"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :data="tableData"
          border
          style="width: 100%; margin: 25px 0"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="姓名"
            width="150"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="times"
            label="时间"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="total_score"
            label="分数"
          ></el-table-column>
          <el-table-column prop="order" label="排名"></el-table-column>
          <el-table-column prop="level" label="等级"></el-table-column>
          <el-table-column label="操作" width="110">
            <template slot-scope="scope">
              <el-button
                size="small"
                icon="el-icon-view"
                @click="documentDetail(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>
    <CheckTable
      v-if="visible"
      :title="title"
      :datas.sync="checkDatas"
      :visible.sync="visible"
      :isYear.sync="isYear"
    />
  </el-row>
</template>

<script>
import staNewAPI from "@apis/statisticsNew";
import CheckTable from "./checkTable";
import perAPI from "@apis/performance";
import { mapState } from "vuex";
export default {
  data() {
    return {
      month: "", //月份选择

      loading: false,
      uid: "",
      userName: "",
      tableData: [],

      title: "绩效详情",
      visible: false,
      checkDatas: {},
      isYear: false,
    };
  },
  components: { CheckTable },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
  },
  created() {
    let date = new Date();
    let Year = date.getFullYear();
    let Day =
      date.getMonth() + 1 < 10
        ? `0${date.getMonth() + 1}`
        : date.getMonth() + 1;
    this.month = `${Year}-${Day}`;
    this.uid = this.userInfo.user.review_id;
    this.userName = this.userInfo.user.name;
    this.loading = true;
    this.getList();
  },
  mounted() {},
  methods: {
    //表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //月份选择
    changeDate(val) {
      this.month = val;
      this.loading = true;
      this.getList();
    },

    getList() {
      staNewAPI
        .getStatisticPersonQy(this.month)
        .then((res) => {
          // console.log(res, "res");
          this.tableData = [
            {
              name: this.userName,
              times: "当月分数",
              total_score: res.monthVO ? res.monthVO.totalScore : "暂无",
              order: res.monthVO ? res.monthVO.order : "暂无",
              level: res.monthVO ? res.monthVO.level : "暂无",
            },
            // {
            //   name: this.userName,
            //   times: "年度绩效",
            //   total_score: res.yearVO ? res.yearVO.score : "暂无",
            //   order: res.yearVO ? res.yearVO.orderNo:'暂无',
            //   level: res.yearVO ? res.yearVO.level:'暂无'
            // },
          ];
          this.loading = false;
        })
        .catch((err) => {
          this.tableData = [];
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    //获取绩效考核详情
    documentDetail(row) {
      if (row.times == "当月分数") {
        this.isYear = false;
        this.loading = true;
        perAPI
          .getPerviewList({ uid: this.uid, month: this.month })
          .then((res) => {
            // console.log(res.data, "resDetail");
            this.title = "当月绩效详情";
            this.checkDatas = { ...res.data };
            this.loading = false;
            this.visible = true;
          })
          .catch((err) => {
            this.loading = false;
            if (err.data.code) {
              this.$message.error(err.message);
            }
          });
      } else {
        this.isYear = true;
        staNewAPI
          .getStatisticQuarterPerson({
            year: this.month.slice(0, 4),
            uid: this.userInfo.user.id,
          })
          .then((res) => {
            this.title = "季度绩效详情";
            let dataYear = res ? [{ ...res }] : [];
            this.checkDatas = { tableYear: dataYear };
            this.loading = false;
            this.visible = true;
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error(err.message);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .box-title-position {
//   div {
//     display: inline-block;
//   }
// }
.box-construction {
  min-height: 100px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
.custom-tree-node {
  font-size: 14px;
}
</style>